<template>
	<view class="fill-bg-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/fillBg.png)'}]">
		<cu-custom :isBack="true" :isWhiteBack="true" style="background-color: transparent;">
			<block slot="backText" ></block>
			<block slot="content">
				<view class="custom-white-title">问卷详情</view>
			</block>
		</cu-custom>
		<view class="info-title-content">
			<view class="title">问卷调查</view>
			<view class="fill-time">答题时间：11月12日——11月13日</view>
			<view class="fill-time">合格标准：60分及格（满分100分）</view>
		</view>
		<view class="padding-left-32 padding-right-32">
			<view class="info-answer-content">
				<view class="title">问卷调查情况</view>
				<view class="flex margin-top-32">
					<view class="flex-sub text-center">
						<view><text class="num">30</text><text class="num-per">人</text></view>
						<view class="desc">总人数</view>
					</view>
					<view class="flex-treble text-center">
						<view><text class="num">16</text><text class="num-per">人</text></view>
						<view class="desc">已完成人数</view>
					</view>
					<view class="flex-sub text-center">
						<view><text class="num">8</text><text class="num-per">人</text></view>
						<view class="desc">未完成人数</view>
					</view>
				</view>
			</view>
			
			<view class="info-answer-content">
				<view class="flex margin-top-16 text-center">
					<view class="flex-sub" :class="curTab==1?'selClock':'unselClock'" @click="curTab=1">
						已完成(16)
						<view :class="curTab==1?'selClockBottom':''"></view>
					</view>
					<view class="flex-sub" :class="curTab==2?'selClock':'unselClock'" @click="curTab=2">
						未完成(8)
						<view :class="curTab==2?'selClockBottom':''"></view>
					</view>
				</view>
				<view class="margin-top-48" v-if="curTab==1">
					<view class="complete-content" v-for="(info,index) in 3" :key="index">
						<view class="flex align-center justify-start">
							<view>
								<image src="https://txr001.zthj.net/static/img/avatar.png" class="img-100"></image>
							</view>
							<view class="padding-left-24">
								<view class="text-0101 text-df">某某某</view>
								<view class="text-sm text-0101 padding-top-12">品牌部</view>
							</view>
							<view class="qcircle-content">
								<qCharts ></qCharts>
							</view>
						</view>
						<view class="margin-top-72 flex">
							<view class="flex-sub text-center">
								<view><text class="text-40 text-black text-bold-600">30</text></view>
								<view class="text-black text-sm">总题数</view>
							</view>
							<view class="flex-treble text-center">
								<view><text class="text-40 text-black text-bold-600">16</text></view>
								<view class="text-black text-sm">正确题数</view>
							</view>
							<view class="flex-sub text-center">
								<view><text class="text-40 text-black text-bold-600">8</text></view>
								<view class="text-black text-sm">错误题数</view>
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top-18" v-if="curTab==2">
					<view class="uncomplete-content" v-for="(info,index) in 3" :key="index">
						<view class="flex align-center justify-start">
							<view>
								<image src="https://txr001.zthj.net/static/img/avatar.png" class="img-100"></image>
							</view>
							<view class="padding-left-24">
								<view class="text-0101 text-df">某某某</view>
								<view class="text-sm text-0101 padding-top-12">品牌部</view>
							</view>
							<view class="qcircle-content">
								<qCharts ></qCharts>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import qCharts from '@/components/charts/questionCharts.vue'
	export default {
		components:{qCharts},
		data() {
			return {
				curTab:1
			}
		},
		onLoad() {
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.fill-bg-content{
		background-size: 100% 100%;
		width: 100%;
		height: 1764rpx;
		.info-title-content{
			padding: 180rpx 54rpx 0;
			.title{
				font-size: 52rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
			.fill-time{
				padding-top: 16rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			
		}
		.info-answer-content{
			background: #FFFFFF;
			border-radius: 48rpx;
			margin-top: 40rpx;
			padding: 32rpx;
			.title{
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}
			.num{
				font-size: 48rpx;
				font-weight: 600;
				color: #000000;
			}
			.num-per{
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
				padding-left: 8rpx;
			}
			.desc{
				padding-top: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
			}
			.selClock{
				font-size: 32rpx;
				font-weight: 600;
				color: #24458E;
			}
			.unselClock{
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}
			.selClockBottom{
				margin-top: 8rpx;
				width: 96rpx;
				height: 8rpx;
				background: #24458E;
				border-radius: 4rpx;
				margin-left: 110rpx;
			}
			.complete-content{
				position: relative;
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #000000;
				margin-bottom: 32rpx;
				padding: 30rpx 32rpx 34rpx;
			}
			.qcircle-content{
				position: absolute;
				left: 176rpx;
				top: 5rpx;
			}
			.uncomplete-content{
				padding: 48rpx 0;
				border-bottom: 2rpx solid #E6E6E6 ;
			}
		}
	}
	
</style>